<template>
  <div>
    <el-form 
      ref="form" 
      :model="form"
      label-width="120px"
      label-position="left"
      class="el-form"
    >
      <el-container>
        <el-aside width="230px" style="height: 230px">
          <el-image
            style="width: 220px; height: 220px"
            :src="form.photo"
            :fit="fit"
          ></el-image>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="main-fir-box">
              <div>
                <span style="margin-right: 15px">{{form.name}}</span>
                <span>{{form.sex}}</span>
              </div>
              <el-button 
                class="btn-color"
                @click="editHandle"
                v-if="isAuth(['ROOT', 'HR']) && form.roles!='超级管理员'"
                >
                  编辑
                </el-button>
            </div>
            <div class="main-sec-box">
              <div class="main-sec-con">部门 / 职位：{{form.dept}} / {{form.roles}}</div>
              <div class="main-sec-con">手机号：{{form.tel}}</div>
              <div class="main-sec-con">员工状态：{{form.status}}</div>
              <div class="main-sec-con">邮箱：{{form.email}}</div>
            </div>
          </div>
        </el-main>
      </el-container>

      <el-divider></el-divider>
      <div class="posi-inform">基本信息</div>
      <div class="main">
        <el-form-item label="姓名" prop="name">
          <div style="width: 300px;padding-left: 20px">{{form.name}}</div>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <div style="width: 300px;padding-left: 20px">{{form.nickname}}</div>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <div style="width: 300px;padding-left: 20px">{{form.username}}</div>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <div style="width: 300px;padding-left: 20px">{{form.sex}}</div>
        </el-form-item>
      </div>
      <el-divider></el-divider>
      <div class="main">
        <el-form-item label="手机号" prop="tel">
          <div style="width: 350px;padding-left: 20px">{{form.tel}}</div>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <div style="width: 350px;padding-left: 20px">{{form.email}}</div>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <div style="width: 350px;padding-left: 20px">{{form.birthday}}</div>
        </el-form-item>
      </div>
      <el-divider></el-divider>
      <div class="posi-inform">任职信息</div>
      <div class="main">
        <el-form-item label="职位" prop="roles">
          <div style="width: 350px;padding-left: 20px">{{form.roles}}</div>
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          <div style="width: 350px;padding-left: 20px">{{form.dept}}</div>
        </el-form-item>
        <el-form-item label="员工状态" prop="status">
          <div style="width: 350px;padding-left: 20px">{{form.status}}</div>
        </el-form-item>
        <el-form-item label="入职时间" prop="hiredate">
          <div style="width: 350px;padding-left: 20px">{{form.hiredate}}</div>
        </el-form-item>
      </div>
      <el-divider></el-divider>
    </el-form>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// import { beforeunloadHandler } from '../../utils/utils'
export default {
  props: ['evaItem'],
  data() {
    return {
      id: '',
      form: {

      },
      roleList: [],
      deptList: [],
    }
  },
  async created() {
    this.getDeptList()
    this.getRoleList()
    this.id = this.$route.params.id
    // console.log(this.id);
    await this.init(this.id)
  },
  methods: {
    init(id) {
      console.log(id);
      if (id) {
        this.$http('user/selectUserById', 'post', {id}, true, resp => {
          console.log(resp.list);
          if (resp.code == 200) {
            this.form = resp.list
            this.deptList.some(item => {
              if (item.id == this.form.dept) {
                this.form.dept = item.deptName
                return true
              }
            })
            this.form.hiredate = this.form.hiredate ? dayjs(this.form.hiredate).format('YYYY-MM-DD') : ''
            this.form.birthday = this.form.birthday ? dayjs(this.form.birthday).format('YYYY-MM-DD') : ''
            setTimeout(() => {
              // console.log(Object.keys(this.deptList));
              Object.keys(this.deptList).forEach(item => {
                // console.log(this.deptList[item]);
                
                if (this.deptList[item].id == this.form.dept) {
                  this.form.dept = this.deptList[item].deptName
                }
              })
            },0)
            if (this.form.status == 1) {
              this.form.status = '初始'
            } else if (this.form.status == 2) {
              this.form.status = '在职(试用期)'
            } else if (this.form.status == 3) {
              this.form.status = '在职(已转正)'
            } else if (this.form.status == 4) {
              this.form.status = '离职'
            }
            Object.keys(this.form).forEach(item => {
              if (this.form[item] == '') {
                this.form[item] = '-'
              }
            })
          }
        })
      }
    },
    editHandle() {
      console.log(this.id);
      
      this.$router.push({name: 'UserUpdate', params: {id: this.id, tabClose: true}})
    },
    // 获取部门
    getDeptList() {
      this.$http('dept/searchAllDept', 'get', null, true, resp => {
        if (resp.code == 200) {
          this.deptList = resp.list
          console.log(this.deptList);
        }
      })
    },
    // 获取角色
    getRoleList() {
      this.$http('role/searchAllRole', 'get', null, true, resp => {
        if (resp.code == 200) {
          this.roleList = resp.list
          console.log(this.roleList);
          
        }
      })
    },
  },
  // mounted() {
  //   window.addEventListener('beforeunload', e => beforeunloadHandler(e))
  // }
}
</script>

<style lang="scss" scoped>
@import './userCheck.scss';
</style>